import { reactive, inject } from 'vue';

function Add(props) {
    console.log('render add');

    const state = reactive({
        count: props.count
    });

    function clickHandle() {
        state.count++;
    }

    return <div onclick={clickHandle}>{ state.count }</div>
}

function SetCount(props) {
    console.log('render count');
    return (
        <>
            <h1 onClick={ props.handle }>{ props.count }</h1>
            <Add count={ props.count } />
        </>
    )
}

export default {
    methods: {
        addCount() {
            this.state.count++;
        }
    },

    setup() {
        const state = inject('location', {});

        return {
            state
        };
    },

    render() {
        return (
            <>
                <SetCount handle={this.addCount} count={this.state.count} />
            </>
        )
    }
}